<template>
  <h1>个人信息</h1>
  <h1>姓名：{{name}}</h1>
  <h1>年龄：{{age}}</h1>
  <button @click="sayHello">说话</button>
  <br>
  <button @click="sayWelcome">欢迎</button>
</template>

<script>
// import {h} from 'vue'
export default {
  name: 'App',
  // 此处只是测试一下setup，暂时不考虑响应式的问题
  data(){
    return{
     sex:'gender'
    }

  },
  methods:{
    sayWelcome(){
      console.log('热烈欢迎')
      // vue2可以读取到vue3的内容
      console.log(this.sex,this.name,this.age,this.sayHello) 
    }
  },
  setup(){
    // 数据
    let name = 'zhangsan'
    let age = 18

    // 方法
    function sayHello(){
      // vue3都不到vue2的内容
      console.log(name,age,this.sex,this.sayWelcome)
      alert(`我叫${name},我${age}岁了，你好啊！`)
    }

// 返回一个对象（常用）
    return{
      name,
      age,
      sayHello
    }


// 返回一个渲染函数
    return () =>h('h1','清华')
  }
}
</script>

